{% extends "base.html" %}

{% block title %}客户跟进统计报表{% endblock %}

{% block content %}
<div class="w-full">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-semibold text-gray-800">客户跟进统计报表</h1>
        <div>
            <a href="{{ url_for('followup.list_followups') }}" class="inline-flex items-center px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                <i class="fas fa-arrow-left mr-2"></i> 返回跟进列表
            </a>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-4">
        <div class="bg-white rounded-lg shadow-sm border-l-4 border-blue-500 h-full p-4">
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="text-xs font-semibold text-blue-600 uppercase tracking-wider mb-1">
                        总跟进次数</div>
                    <div class="text-2xl font-bold text-gray-800">{{ total_followups }}</div>
                </div>
                <div class="ml-auto">
                    <i class="fas fa-comments text-3xl text-gray-300"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border-l-4 border-green-500 h-full p-4">
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="text-xs font-semibold text-green-600 uppercase tracking-wider mb-1">
                        本月跟进</div>
                    <div class="text-2xl font-bold text-gray-800">{{ month_followups }}</div>
                </div>
                <div class="ml-auto">
                    <i class="fas fa-calendar text-3xl text-gray-300"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border-l-4 border-cyan-500 h-full p-4">
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="text-xs font-semibold text-cyan-600 uppercase tracking-wider mb-1">本周跟进</div>
                    <div class="text-2xl font-bold text-gray-800">{{ week_followups }}</div>
                </div>
                <div class="ml-auto">
                    <i class="fas fa-calendar-week text-3xl text-gray-300"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border-l-4 border-amber-500 h-full p-4">
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="text-xs font-semibold text-amber-600 uppercase tracking-wider mb-1">
                        解决方案配合</div>
                    <div class="text-2xl font-bold text-gray-800">
                        {{ solution_confirmed_count }}/{{ solution_support_count }}
                    </div>
                </div>
                <div class="ml-auto">
                    <i class="fas fa-handshake text-3xl text-gray-300"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <!-- 跟进方式统计 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-4 py-3 border-b border-gray-200">
                <h6 class="text-lg font-semibold text-blue-600 m-0">跟进方式统计</h6>
            </div>
            <div class="p-4">
                {% if method_stats %}
                <div class="pt-4 pb-2">
                    <canvas id="methodChart" class="max-h-64"></canvas>
                </div>
                <div class="mt-4 text-center text-sm">
                    {% for stat in method_stats %}
                    <span class="mr-4">
                        <i class="fas fa-circle" style="color: {{ ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'][loop.index0 % 5] }}"></i>
                        {{ stat.method }}: {{ stat.count }}
                    </span>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-500">暂无数据</p>
                {% endif %}
            </div>
        </div>

        <!-- 每月跟进趋势 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-4 py-3 border-b border-gray-200">
                <h6 class="text-lg font-semibold text-blue-600 m-0">每月跟进趋势</h6>
            </div>
            <div class="p-4">
                <div class="h-64">
                    <canvas id="monthlyTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- 销售人员跟进统计（仅管理员和部门负责人可见） -->
    {% if current_user.role in ['admin', 'manager'] and sales_stats %}
    <div class="row">
        <div class="col-xl-12 col-lg-12 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">销售人员跟进统计</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="salesStatsTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>销售人员</th>
                                    <th>跟进次数</th>
                                    <th>占比</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for stat in sales_stats %}
                                <tr>
                                    <td>{{ stat.username }}</td>
                                    <td>{{ stat.count }}</td>
                                    <td>
                                        {% set total = sales_stats | sum(attribute='count') %}
                                        {{ "%.1f"|format((stat.count / total * 100) if total > 0 else 0) }}%
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 跟进提醒 -->
    <div class="row">
        <!-- 即将到期的跟进 -->
        <div class="col-xl-4 col-lg-5 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">即将到期的跟进</h6>
                </div>
                <div class="card-body">
                    {% if upcoming_followups %}
                    {% for followup in upcoming_followups %}
                    <div class="card border-left-warning shadow h-100 py-2 mb-3">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                        {{ followup.customer.name if followup.customer else '未知客户' }}
                                    </div>
                                    <div class="text-gray-800 small">
                                        跟进时间: {{ followup.next_followup_time.strftime('%Y-%m-%d') if followup.next_followup_time else '未设置' }}
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <a href="{{ url_for('followup.view_followup', followup_id=followup.id) }}" 
                                       class="btn btn-sm btn-outline-warning">查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-center text-muted">暂无即将到期的跟进</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 过期的跟进 -->
        <div class="col-xl-4 col-lg-5 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-danger">过期的跟进</h6>
                </div>
                <div class="card-body">
                    {% if overdue_followups %}
                    {% for followup in overdue_followups %}
                    <div class="card border-left-danger shadow h-100 py-2 mb-3">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                        {{ followup.customer.name if followup.customer else '未知客户' }}
                                    </div>
                                    <div class="text-gray-800 small">
                                        跟进时间: {{ followup.next_followup_time.strftime('%Y-%m-%d') if followup.next_followup_time else '未设置' }}
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <a href="{{ url_for('followup.view_followup', followup_id=followup.id) }}" 
                                       class="btn btn-sm btn-outline-danger">查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-center text-muted">暂无过期的跟进</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 待确认解决方案配合 -->
        <div class="col-xl-4 col-lg-5 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">待确认解决方案配合</h6>
                </div>
                <div class="card-body">
                    {% if pending_solution_support %}
                    {% for followup in pending_solution_support %}
                    <div class="card border-left-info shadow h-100 py-2 mb-3">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        {{ followup.customer.name if followup.customer else '未知客户' }}
                                    </div>
                                    <div class="text-gray-800 small">
                                        负责人: {{ followup.manager.username if followup.manager else '未知' }}
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <a href="{{ url_for('followup.view_followup', followup_id=followup.id) }}" 
                                       class="btn btn-sm btn-outline-info">查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <p class="text-center text-muted">暂无待确认的解决方案配合</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 员工跟进统计 -->
    <div class="bg-white rounded-lg shadow-sm mt-4">
        <div class="px-4 py-3 border-b border-gray-200">
            <h6 class="text-lg font-semibold text-blue-600 m-0">员工跟进统计</h6>
        </div>
        <div class="p-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总跟进次数</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">本月跟进</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">本周跟进</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">解决方案配合</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for stat in user_stats %}
                        <tr>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.user_name }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.total_followups }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.month_followups }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.week_followups }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.solution_confirmed_count }}/{{ stat.solution_support_count }}</td>
                            <td class="px-3 py-4 text-sm">
                                <a href="{{ url_for('followup.list_followups', user_id=stat.user_id) }}" class="text-blue-600 hover:text-blue-900">查看详情</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 客户跟进统计 -->
    <div class="bg-white rounded-lg shadow-sm mt-4">
        <div class="px-4 py-3 border-b border-gray-200">
            <h6 class="text-lg font-semibold text-blue-600 m-0">客户跟进统计</h6>
        </div>
        <div class="p-4">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户名称</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总跟进次数</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后跟进时间</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">跟进方式</th>
                            <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for stat in customer_stats %}
                        <tr>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.customer_name }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.total_followups }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.last_followup_date or '-' }}</td>
                            <td class="px-3 py-4 text-sm text-gray-900">{{ stat.last_followup_method or '-' }}</td>
                            <td class="px-3 py-4 text-sm">
                                <a href="{{ url_for('followup.list_followups', customer_id=stat.customer_id) }}" class="text-blue-600 hover:text-blue-900">查看详情</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 跟进效果统计 -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-4">
        <!-- 跟进效果饼图 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-4 py-3 border-b border-gray-200">
                <h6 class="text-lg font-semibold text-blue-600 m-0">跟进效果统计</h6>
            </div>
            <div class="p-4">
                {% if effect_stats %}
                <div class="pt-4 pb-2">
                    <canvas id="effectChart" class="max-h-64"></canvas>
                </div>
                <div class="mt-4 text-center text-sm">
                    {% for stat in effect_stats %}
                    <span class="mr-4">
                        <i class="fas fa-circle" style="color: {{ ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'][loop.index0 % 5] }}"></i>
                        {{ stat.effect }}: {{ stat.count }}
                    </span>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-500">暂无数据</p>
                {% endif %}
            </div>
        </div>

        <!-- 跟进效果表格 -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="px-4 py-3 border-b border-gray-200">
                <h6 class="text-lg font-semibold text-blue-600 m-0">跟进效果详情</h6>
            </div>
            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">效果</th>
                                <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                                <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">占比</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for stat in effect_stats %}
                            <tr>
                                <td class="px-3 py-4 text-sm text-gray-900">{{ stat.effect }}</td>
                                <td class="px-3 py-4 text-sm text-gray-900">{{ stat.count }}</td>
                                <td class="px-3 py-4 text-sm text-gray-900">{{ stat.percentage }}%</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 跟进方式统计饼图
    {% if method_stats %}
    const methodCtx = document.getElementById('methodChart');
    if (methodCtx) {
        new Chart(methodCtx, {
            type: 'doughnut',
            data: {
                labels: [{% for stat in method_stats %}'{{ stat.method }}'{% if not loop.last %},{% endif %}{% endfor %}],
                datasets: [{
                    data: [{% for stat in method_stats %}{{ stat.count }}{% if not loop.last %},{% endif %}{% endfor %}],
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
                    hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#f4b619', '#dc3545'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyColor: "#858796",
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        padding: 15,
                        displayColors: false,
                        caretPadding: 10,
                    }
                },
                cutout: '70%',
            },
        });
    }
    {% endif %}

    // 每月跟进趋势折线图
    const monthlyTrendCtx = document.getElementById('monthlyTrendChart');
    if (monthlyTrendCtx) {
        new Chart(monthlyTrendCtx, {
            type: 'line',
            data: {
                labels: [{% for trend in monthly_trend %}'{{ trend.month }}'{% if not loop.last %},{% endif %}{% endfor %}],
                datasets: [{
                    label: "跟进次数",
                    tension: 0.3,
                    backgroundColor: "rgba(78, 115, 223, 0.05)",
                    borderColor: "rgba(78, 115, 223, 1)",
                    pointRadius: 3,
                    pointBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointBorderColor: "rgba(78, 115, 223, 1)",
                    pointHoverRadius: 3,
                    pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                    pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    data: [{% for trend in monthly_trend %}{{ trend.count }}{% if not loop.last %},{% endif %}{% endfor %}],
                }],
            },
            options: {
                maintainAspectRatio: false,
                layout: {
                    padding: {
                        left: 10,
                        right: 25,
                        top: 25,
                        bottom: 0
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            maxTicksLimit: 7
                        }
                    },
                    y: {
                        ticks: {
                            maxTicksLimit: 5,
                            padding: 10,
                            callback: function(value) {
                                return value.toLocaleString();
                            }
                        },
                        grid: {
                            color: "rgb(234, 236, 244)",
                            zeroLineColor: "rgb(234, 236, 244)",
                            drawBorder: false,
                            borderDash: [2],
                            zeroLineBorderDash: [2]
                        }
                    },
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyColor: "#858796",
                        titleMarginBottom: 10,
                        titleColor: '#6e707e',
                        titleFont: {
                            size: 14
                        },
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        padding: 15,
                        displayColors: false,
                        intersect: false,
                        mode: 'index',
                        caretPadding: 10,
                        callbacks: {
                            label: function(context) {
                                return '跟进次数: ' + context.parsed.y.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
{% endblock %}